<template>
  <div>
    <el-form :model="dialog_form_Props_obj">
      <el-form-item label="电影">
        <el-select
          v-model="dialog_form_Props_obj.movie"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="个人评分"> </el-form-item>
      <el-form-item label="观影次数"> </el-form-item>
      <el-form-item label="收藏情况">
        分辨率
        <el-select
          v-model="dialog_form_Props_obj.collect1"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option label="4K" value=""> </el-option>
          <el-option label="1080P" value=""> </el-option>
          <el-option label="720P" value=""> </el-option>
        </el-select>
        附件
        <el-select
          v-model="dialog_form_Props_obj.collect2"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option label="HDR" value=""> </el-option>
          <el-option label="杜比7.1" value=""> </el-option>
          <el-option label="高码率" value=""> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="eidt_cancel()">取消</el-button>
      <el-button
        type="primary"
        @click="eidt_confirm()"
        :loading="loading_confirm"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialog_form_Props_obj: Object
  },
  mounted () {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  data () {
    return {
      loading_confirm: false,
      options: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
      listType: '观影记录',
    }
  },
  methods: {
    eidt_cancel () {

      this.$parent.$parent.eidt_cancel_father();
    },
    eidt_confirm () {
      this.loading_confirm = true
      setTimeout(() => {
        this.loading_confirm = false
        this.$parent.$parent.eidt_confirm_father();
      }, 800)
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
  }

}
</script>

<style>
</style>